<template>
  <div class="container mx-auto py-8">
    <div class="flex gap-8">
      <div class="w-1/5">
        <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <el-menu-item index="1">
          <span>About Us</span>
        </el-menu-item>
        <el-menu-item index="2">
          <span>Term & Condition</span>
        </el-menu-item>
        <el-menu-item index="3">
          <span>Privacy Policy</span>
        </el-menu-item>
      </el-menu>
      </div>

      <div class="w-4/5">
        <template v-if="activeIndex == '1'">
          <main class="mx-auto py-8 px-6">
            <img
              src="https://cdn.pixabay.com/photo/2024/12/22/14/14/winter-9284576_1280.jpg"
              alt="AUGTO ELECTRONICS"
              class="w-full mb-6 bannerimg"
            />
            <div class="bg-white p-6 rounded-lg shadow-md mb-6">
              <h2 class="text-xl font-bold mb-4">About AUGTO</h2>
              <p>
                AUGTO is a trusted distributor of Industrial Automation and Controls,
                known for its strong partnerships with leading brands and suppliers.
                This network allows us to provide reliable, high-performance products
                that meet industry standards and consistently exceed customer
                expectations. With over 650,000 in-stock industrial and electronic
                products from more than 2,000 trusted suppliers, we serve a global
                customer base of over 1 million. Our extensive inventory and efficient
                distribution capabilities enable us to meet diverse needs with timely
                delivery and competitive pricing. AUGTO is dedicated to supporting
                customers throughout the purchasing process—from sourcing the right
                products to ensuring smooth, on-time delivery. By providing access to
                a wide range of quality products, we help businesses optimize their
                operations, reduce costs, and streamline procurement with the highest
                level of service.
              </p>
            </div>
          </main>
          <section class="bg-blue-500 py-16">
            <div class="max-w-7xl mx-auto px-4 text-white text-center">
              <h1 class="text-4xl font-bold mb-4">
                Support for Your Industrial Automation and Controls Needs
              </h1>
              <p class="text-lg mb-8">
                Whether you're seeking product details, sourcing assistance, or
                personalized guidance, AUGTO is here to help. Reach out to experience
                our customer-focused service, and let us exceed your expectations.
              </p>
              <div class="flex space-x-8">
                <div class="bg-white p-8 rounded-md shadow-md w-1/3">
                  <img class="img-icon" src="@/assets/img/location.png" />
                  <h2 class="text-black mt-2 mb-2">address</h2>
                  <p class="text-gray-800">
                    Unit 04A, 11th Floor, West Tower, AVIC Center, No. 1018, Huafu
                    Road, Futian District, Shenzhen, China.
                  </p>
                </div>
                <div class="bg-white p-8 rounded-md shadow-md w-1/3">
                  <img class="img-icon" src="@/assets/img/phone.png" />
                  <h2 class="text-black mt-2 mb-2">Phone</h2>
                  <p class="text-gray-800">+0755-23964124</p>
                </div>
                <div class="bg-white p-8 rounded-md shadow-md w-1/3">
                  <img class="img-icon" src="@/assets/img/mail.png" />
                  <h2 class="text-black mt-2 mb-2">Email</h2>
                  <p class="text-gray-800">info@augto.com</p>
                </div>
              </div>
            </div>
          </section>
          <section class="py-16">
            <div class="max-w-7xl mx-auto px-4">
              <h2 class="text-3xl font-bold mb-4 text-center">
                How can we help you?
              </h2>
              <p class="text-gray-600 mb-8 text-center">
                Thank you for your interest in AUGTO products and services. We care
                about what you think. Please fill out the following form so that we
                can continue to provide you with the outstanding service you deserve.
              </p>
              <el-form :model="formData">
                <el-form-item label-position="top" label="What is the subject of the suggestion">
                  <el-input v-model="formData.rfq" placeholder="RFQ"></el-input>
                </el-form-item>
                <el-form-item label-position="top" label="Email">
                  <el-input
                    v-model="formData.email"
                    placeholder="Please input your email address"
                  ></el-input>
                </el-form-item>
                <el-form-item label-position="top" label="Comment">
                  <el-input
                    v-model="formData.comment"
                    type="textarea"
                    :rows="4"
                    placeholder="Please input your comment"
                  ></el-input>
                </el-form-item>
                <el-button type="primary" @click="handleSubmit">Submit</el-button>
              </el-form>
              <p class="mt-4 text-gray-600 text-center">
                If you would like to find out more about how AUGTO handles your
                personal data, please refer to our Privacy Policy for more
                information.
              </p>
            </div>
          </section>
        </template>
        <template v-if="activeIndex == '2'">
          <div class="text-2xl font-bold mb-4">Term & Condition</div>
          <p>AUGTO operates the website located at www.AUGTO.com to provide online access to information about products that are available at AUGTO (the "product") and to facilitate purchase of Products (the "Service"). These Terms of Use, together with the Conditions of Order, are referred to as this "Agreement". By using AUGTO, you agree to each of the following terms and conditions set forth herein ("Terms of Use"). By ordering Products, you agree to the Terms of Use, as well as the Conditions of Order, set forth below. AUGTO reserves the right to modify this Agreement at any time without giving you prior notice. Your use of the Site following any such modification constitutes your agreement to follow and be bound by the Agreement as modified. The last date this Agreement was revised is set forth below.</p>
          <ul class="list-disc list-inside mb-4">
            <li class="font-bold">Intellectual Property Rights</li>
            <li>We are the owner or the licensee of all intellectual property rights in our sites (including copyright, trade marks, design rights, patents or other intellectual property rights), and in the material published on it. Those works are protected by intellectual property laws and treaties around the world. All such rights are reserved. You may print off copies, and may download extracts, of any page(s) from our sites for your personal use or internal business use and you may draw the attention of others within your organization to content posted on our sites. Reproduction of part or all of the contents of the websites in any form is prohibited other than for personal use or internal business use only and may not be recopied and shared with a third party.</li>
            <li class="font-bold">Order Process</li>
            <li>We welcome you to please the order for all the merchandise from our website, you may need to read the order process to understand how you purchase the merchandise and get the service after payment and shipping.</li>
            <li class="font-bold">Payment Term</li>
            <li>AUGTO offers the several convenient payment methods by US dollars, including PAYPAL, Credit Card, Wire Transfer. Payment must be made in the currency in which the order was placed. If you need other payment terms, please contact our customer service: sales@AUGTO.com.</li>
            <li class="font-bold">Shipping Option</li>
            <li>AUGTO offers different kinds of shipping methods: we may help you arrange the delivery of the package via Fedex, DHL, UPS, TNT, EMS, or Other way you prefer, you may choose your own logistic service if you have cooperated with specific delivery company. We also accept the shipping method as the client requested. Normally lead time most of part will provide 1-3 working days or 5-7 working days, special requirement needs to confirm with our sales team.</li>
            <li class="font-bold">Quality control and after-sales service</li>
            <li>AUGTO guarantees all the merchandise we provide is from original factory authorized agent and authorized distributors, all is original and new parts. We will provide the inspection record for all the orders by the delivery from our customer service team. We also provide one year warranty after the merchandise's delivery. We will not accept the order cancel unless customer has a legal reason. Such as: have the evident to prove that our merchandise is not original and new parts. When there is some quality issue happen after you got the merchandise, please contact us within the 3 working days and we will obey the after-sales service agreement to exchange the new parts. After-sales service agreement is the regulation to provide the better service for you. You may need to read carefully to handle the product issue before the product complain. We will not accept cancel the order after sending. We will only accept the product issue with apparent damage during transportation when your receive the package at sight and keep the photo for the record. We will require the formal product issue description when customer complains the product issue after receiving 3 working days to confirm the issue. The formal product issue description including but not only: text description, photos, video, preliminary test etc. AUGTO will exchange the new parts to replace, and undertake the shipping cost for the new parts after the product issue is confirmed. If necessary, AUGTO may require to return the failure product for the inspection or testing purpose, customers should assist to return the failure parts, AUGTO will undertake the shipping cost.</li>
            <li class="font-bold">Disclaimer</li>
            <li>AUGTO is accountable to offer technical support make sure the website in working order. Try to avoid service interruption, or Interrupt time limit in the shortest time, make sure can deal on internet smoothly. However as a result of force majeure or other reasons can't control, make the website crash or unable to result to some record, message or information lost, AUGTO is irresponsibility. And in the following case AUGTO will not be held responsible. For any unauthorized access or illegal or unauthorized use of information, including Identifiable Information. If user information, including Identifiable Information, is accessed through unauthorized or improper use of user account or login information or due to user failure to secure user username, password, or customer ID.</li>
          </ul>
        </template>
        <template v-if="activeIndex == '3'">
          <div class="text-2xl font-bold">Privacy Policy</div>
          <div class=" text-gray-700">
            <p>AUGTO value the privacy of our users, and privacy is your important right. We may collect and use your information when you use our services. We hope that through this Privacy Policy we will explain how we collect, use, store and share this information and how to access, update, control and protect it when you use our services.</p>
            <h2 class="text-xl font-bold mt-4 mb-2">Information we may collect</h2>
            <p>The following information about you may be collected, stored and used when we provide services. If you do not provide relevant information, you may not be able to register as a user or enjoy some of the services we offer, or you may not be able to achieve the desired results of the service.</p>
            <ul class="list-disc list-inside">
              <li>Information you provide, such as information when registering.</li>
              <li>Your information shared by other parties information about your sharing provided by other parties when using our services.</li>
              <li>Location information of you when using our service.</li>
              <li>The information we obtained from you, such as the account number of the communication, as well as the communication time, date and duration.</li>
            </ul>
            <h2 class="text-xl font-bold mt-4 mb-2">How do we collect your information?</h2>
            <p>The majority of personal information we receive comes voluntarily from our users in the course of using our services, such as when visiting our website, communicating with us or in the ordering process. Personal information you provide to us. You are free to choose which information you want to provide to us or if you want to provide us with information at all. However, some information, such as your shipping address, payment information and product order information is necessary for the performance of our contractual obligations. Without providing this information, you will not be able to order services from us. Personal information collected via technology: As you use our websites, we may collect passive information through the use of cookies. Personal information we receive from others: We may receive personal information about users from third parties such as web analytics vendors, social media sites, law enforcement agencies, providers of denied party screening and marketing consultants. We receive information on the purchases of shared customers with Utmel for marketing purposes.</p>
            <h2 class="text-xl font-bold mt-4 mb-2">How we might use information</h2>
            <p>We may use the information collected during the process of providing services to you for the following purposes:</p>
            <ul class="list-disc list-inside">
              <li>Provide services to you, use the authentication, customer service, security, fraud monitoring, archiving and backup purposes when we provide services to ensure the security of the products and services we provide to you.</li>
              <li>Help us design services, improve existing services, make us more aware of how you access and use our services to respond specifically to your individual needs, such as language settings, location settings, personalized help with services and instructions, or other responses to you and other users.</li>
              <li>Provide you with more relevant advertisements to replace popular advertisements, evaluate and improve the effectiveness of advertising and other promotions and promotions in our services software certification or management software upgrades; let you participate in our products and service survey.</li>
            </ul>
            <h2 class="text-xl font-bold mt-4 mb-2">How to protect your personal information?</h2>
            <p>AUGTO always aim to deliver the highest level of service and security to our customers. We implement appropriate technical and organizational measures to protect your personal information against accidental or unlawful destruction, loss, change or damage. All personal information we collect will be stored on our secure servers. All electronic transactions entered into via our website will be protected by SSL encryption technology.</p>
            <h2 class="text-xl font-bold mt-4 mb-2">How long do we keep your information?</h2>
            <p>We will store personal information for as long as necessary to fulfill the purposes for which we collect the personal information in accordance with our legal obligations and legitimate business interests. To comply with statutory retention periods, we may store your personal information for up to 5 years.</p>
            <h2 class="text-xl font-bold mt-4 mb-2">Security of your information</h2>
            <p>We takes commercially reasonable steps to protect data, particularly financial information, transmitted through the Web Site. We use a variety of security technologies to protect a user's identifiable information, including secure servers, firewalls, and encryption of credit card information. Unfortunately, there is always a potential risk in sending information through any channel or retaining information on any storage device, and we cannot guarantee the security of any information you transmit over the Internet, including using the website.</p>
          </div>
        </template>
      </div>
    </div>
    
    
  </div>
</template>

<script lang="ts" setup>
import { ref, h } from 'vue';
import { ElAvatar } from 'element-plus';
const activeIndex = ref('1');
const formData = ref({
  rfq: '',
  email: '',
  comment: '',
});

const handleSubmit = () => {
  console.log(formData.value);
  // Add your form submission logic here
};

const handleSelect = (index: string) => {
  activeIndex.value = index;
};
</script>

<style lang="scss" scoped>
.bannerimg {
  width: 1500px;
  height: 300px;
  object-fit: cover;
 }
.img-icon {
  width: 50px;
  margin: 0 auto;
}
</style>